<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>侦听器</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <div id="watch-example">
    <p>
      敢不敢问个问题：
      <input v-model="question">
    </p>
    <p>{{ answer }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

  <script>
    /**
     * 自定义侦听器 数据变动异步执行
    */

    var watchExampleVM = new Vue({
      el: '#watch-example',
      data: {
        question: '',
        answer: '你还没问我问题呢吧还！'
      },
      watch: {
        // 如果 ‘question’ 发生变化，这个函数就会运行
        question: function (newQue, oldQue) {
          this.answer = 'Waiting for you to stop typing...'
          if(this.question !== '') {
            this.debouncedGetAnswer()
          }
        }
      },
      created: function () {
        // _.debounce 是一个通过 lodash 限制操作频率的函数
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
      },
      methods: {
        getAnswer: function () {
          if (this.question.indexOf('?') === -1) {
            this.answer = '是不是缺个问号？'
            return
          }
          this.answer = '正在思考中...'
          var vm = this
          axios.get('https://yesno.wtf/api')
            .then(function (response) {
              vm.answer = _.capitalize(response.data.answer)
            })
            .catch(function (error) {
              vm.answer = 'Error! Could not reach the API. ' + error 
            }) 
        }
      }
    })

  </script>
</body>
</html>